<template>
  <div class="bg-white h-[85vh] w-[430px] z-50 rounded-t-lg p-5 shadow-2xl">
    <!-- 播放标题 -->
    <div class="h-20 w-full flex flex-col justify-around sticky z-40 top-0">
      <div class="flex items-center justify-between">
        <strong>播放队列</strong>
        <!-- 操作 -->
        <div class="flex gap-5 items-center">
          <!-- 多选 -->
          <svg t="1729949016059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="13832" width="20" height="20">
            <path
              d="M296.533333 712.832a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538666a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 768a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 0 1 0-85.333333h469.333333zM296.533333 414.165333a42.666667 42.666667 0 0 1 0 60.330667l-90.538666 90.538667a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165334a42.666667 42.666667 0 0 1 60.330666-60.373333l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 469.333333a42.666667 42.666667 0 0 1 0 85.333334H426.666667a42.666667 42.666667 0 0 1 0-85.333334h469.333333zM296.533333 115.498667a42.666667 42.666667 0 0 1 0 60.330666L205.994667 266.368a42.666667 42.666667 0 0 1-60.330667 0l-30.165333-30.165333A42.666667 42.666667 0 0 1 175.829333 175.786667l60.373334-60.330667a42.666667 42.666667 0 0 1 60.330666 0zM896 170.666667a42.666667 42.666667 0 0 1 0 85.333333H426.666667a42.666667 42.666667 0 1 1 0-85.333333h469.333333z"
              fill="#707070" p-id="13833"></path>
          </svg>
          <!-- 删除 -->
          <svg t="1729948857276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="5144" width="20" height="20">
            <path
              d="M905.6768 212.5824h-174.08V170.496a83.1488 83.1488 0 0 0-83.0464-83.0464h-271.36A83.1488 83.1488 0 0 0 294.1952 170.496v42.0864h-174.08a20.48 20.48 0 0 0 0 40.96h55.7056v535.8592a135.2192 135.2192 0 0 0 135.0656 135.0656h404.0704A135.168 135.168 0 0 0 849.92 789.4016V253.5424h55.6544a20.48 20.48 0 0 0 0-40.96zM335.1552 170.496a42.1376 42.1376 0 0 1 42.0864-42.0864h271.36a42.1376 42.1376 0 0 1 42.0864 42.0864v42.0864H335.1552zM808.96 789.4016a94.1568 94.1568 0 0 1-94.1056 94.1056h-403.968a94.208 94.208 0 0 1-94.1056-94.1056V253.5424H808.96z"
              fill="#707070" p-id="5145"></path>
            <path
              d="M379.3408 739.4304a20.48 20.48 0 0 0 20.48-20.48V402.8928a20.48 20.48 0 0 0-40.96 0v316.0576a20.48 20.48 0 0 0 20.48 20.48zM524.0832 739.4304a20.48 20.48 0 0 0 20.48-20.48V402.8928a20.48 20.48 0 0 0-40.96 0v316.0576a20.48 20.48 0 0 0 20.48 20.48zM670.72 739.4304a20.48 20.48 0 0 0 20.48-20.48V402.8928a20.48 20.48 0 1 0-40.96 0v316.0576a20.48 20.48 0 0 0 20.48 20.48z"
              fill="#707070" p-id="5146"></path>
          </svg>
        </div>
      </div>
      <div class="text-xs text-gray-400">共{{ playList.length }}首歌曲</div>
    </div>
    <!-- 播放列表 -->
    <div v-if="playList.length" class="w-full h-[calc(85vh-96px)] overflow-auto no-scrollbar">
      <div class="h-[70px] relative flex items-center group/item" v-for="item in playList" @dblclick="playSong(item)">
        <img :src="item.al.picUrl" class="rounded w-14 h-14 mx-2" />
        <div class="w-[60%] h-full flex flex-col justify-center gap-3">
          <!-- 歌名 -->
          <div :class="playId == item.id ? 'text-green-500' : ''" class="flex items-center gap-1">
            <p class="text-sm max-w-[55%] truncate">
              {{ item.name }}
            </p>
            <span class="text-[10px] text-green-500 border-[#22c55e] border px-0.5 rounded">VIP</span>
            <span class="text-[10px] text-orange-500 border-[#f97316] border px-0.5 rounded">臻品母带</span>
            <svg t="1729949954716" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="6130" width="23" height="23">
              <path
                d="M853.333333 170.666667h-682.666666c-62.577778 0-113.777778 51.2-113.777778 113.777777v455.111112c0 62.577778 51.2 113.777778 113.777778 113.777777h682.666666c62.577778 0 113.777778-51.2 113.777778-113.777777v-455.111112c0-62.577778-51.2-113.777778-113.777778-113.777777m56.888889 568.888889c0 34.133333-22.755556 56.888889-56.888889 56.888888h-682.666666c-34.133333 0-56.888889-22.755556-56.888889-56.888888v-455.111112c0-34.133333 22.755556-56.888889 56.888889-56.888888h682.666666c34.133333 0 56.888889 22.755556 56.888889 56.888888z m-512-56.888889l284.444445-170.666667-284.444445-170.666667z"
                p-id="6131" fill="#8a8a8a"></path>
            </svg>
          </div>
          <!-- 歌手名 -->
          <p :class="playId == item.id ? 'text-green-500' : ''" class="w-full truncate text-xs text-gray-400">
            <span v-for="(i, index) in item.ar">
              {{ i.name }}
              <em v-if="index != item.ar.length - 1" class="mr-1">|</em>
            </span>
          </p>
        </div>
        <!-- 遮罩层 -->
        <div :class="playId == item.id ? 'visible' : 'invisible'"
          class="absolute top-0 w-full h-full rounded duration-75 group-hover/item:visible"
          style="background-color: rgba(0, 0, 0, 0.1)">
          <!-- 图片上的播放和暂停按钮 -->
          <div class="w-[75px] h-full grid place-items-center rounded">
            <!--播放按钮 -->
            <svg v-if="playId != item.id" t="1729958137852" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="45476" width="20" height="20">
              <path
                d="M780.8 475.733333L285.866667 168.533333c-27.733333-17.066667-64 4.266667-64 36.266667v614.4c0 32 36.266667 53.333333 64 36.266667l492.8-307.2c29.866667-14.933333 29.866667-57.6 2.133333-72.533334z"
                fill="#ffffff" p-id="45477"></path>
            </svg>
            <!-- 暂停按钮 -->
            <svg v-else t="1729958205972" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="47447" width="20" height="20">
              <path
                d="M428.539658 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661L285.613458 862.501816c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L428.539658 833.494155z"
                fill="#ffffff" p-id="47448"></path>
              <path
                d="M760.124635 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661l-113.918539 0c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L760.124635 833.494155z"
                fill="#ffffff" p-id="47449"></path>
            </svg>
          </div>
          <!-- 操作 -->
          <div class="absolute right-5 top-1/2 -translate-y-1/2 flex gap-2 justify-end">
            <!-- 喜欢 -->
            <svg t="1729955575809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="7373" width="20" height="20">
              <path
                d="M511.913993 928.016126c-28.898371 0-57.968755-12.729044-86.695112-41.455401L106.30472 564.034268C68.117588 516.38636 31.994625 471.318663 31.994625 383.935495c0-141.223585 114.905426-255.956996 255.956996-255.956996 53.15236 0 104.068537 16.169326 147.244079 46.615824 14.449185 10.148833 17.889467 30.102469 7.740635 44.551655-10.148833 14.449185-30.102469 17.889467-44.551655 7.740635-32.338653-22.877877-70.525785-34.918864-110.433059-34.918864-105.960692 0-191.967747 86.179069-191.967747 191.967747 0 61.409037 20.297665 90.135394 59.172854 138.643373l315.645893 318.742147c15.997312 15.997312 28.898371 22.361834 41.283387 22.533848 12.729044 0.172014 24.942046-6.192508 41.455401-22.705863l316.677977-319.946246c25.974131-28.210314 57.968755-75.858223 57.968755-137.439274 0-105.960692-86.179069-191.967747-191.967747-191.967747-47.991937 0-94.091718 17.889467-129.526625 50.22812l-133.998992 134.171006c-12.55703 12.55703-32.682681 12.55703-45.239711 0s-12.55703-32.682681 0-45.239711l135.031077-135.203091c48.335965-44.207626 109.745003-67.945574 173.734252-67.945574 141.223585 0 255.956996 114.905426 255.956996 255.956996 0 82.394759-41.111372 144.319839-75.686209 181.646901L598.781119 886.388712C569.882748 915.287082 540.984378 928.016126 511.913993 928.016126z"
                fill="#707070" p-id="7374"></path>
            </svg>
            <!-- 分享 -->
            <svg t="1729956207485" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="32411" width="20" height="20">
              <path
                d="M574.016 665.408a8 8 0 0 0-11.328 0l-116.16 116.224c-53.824 53.76-144.64 59.52-204.032 0a143.616 143.616 0 0 1 0-204.032l116.224-116.224a8 8 0 0 0 0-11.264l-39.808-39.808a8 8 0 0 0-11.328 0L191.424 526.528a216.192 216.192 0 0 0 0 305.92 216.32 216.32 0 0 0 305.92 0l116.288-116.16a8 8 0 0 0 0-11.264l-39.68-39.68z m258.56-473.984a216.192 216.192 0 0 0-305.92 0L410.24 307.584a8 8 0 0 0 0 11.328l39.68 39.68a8 8 0 0 0 11.328 0l116.16-116.16c53.824-53.824 144.64-59.52 204.032 0 59.52 59.52 53.76 150.144 0 203.968l-116.224 116.224a8 8 0 0 0 0 11.264l39.808 39.808a8 8 0 0 0 11.328 0l116.16-116.224a216.512 216.512 0 0 0 0-306.048zM610.112 372.288a8 8 0 0 0-11.328 0L372.288 598.72a8 8 0 0 0 0 11.264l39.616 39.616a8 8 0 0 0 11.264 0l226.432-226.432a8 8 0 0 0 0-11.264l-39.488-39.616z"
                p-id="32412" fill="#707070"></path>
            </svg>
            <!-- 更多 -->
            <svg t="1729956517653" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="44331" width="20" height="20">
              <path
                d="M512 72C269.008 72 72 269.008 72 512S269.008 952 512 952 952 754.992 952 512 755.008 72 512 72z m0 818.256C303.104 890.256 133.76 720.912 133.76 512 133.76 303.104 303.104 133.76 512 133.76c208.896 0 378.24 169.344 378.24 378.24 0.016 208.912-169.328 378.256-378.24 378.256z"
                p-id="44332" fill="#707070"></path>
              <path
                d="M457.968 504.288a61.76 61.76 0 1 0 123.504 0 61.76 61.76 0 0 0-123.504 0z m-185.264 0a61.76 61.76 0 1 0 123.504 0 61.744 61.744 0 0 0-61.744-61.744 61.728 61.728 0 0 0-61.76 61.744z m370.528 0a61.76 61.76 0 1 0 123.52 0 61.76 61.76 0 0 0-123.52 0z"
                p-id="44333" fill="#707070"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="text-gray-400 text-center py-2">当前播放列表为空</div>
  </div>
</template>

<script lang="ts" setup>
import { useStore } from '@renderer/store'
import { storeToRefs } from 'pinia'

const { playListStore, songDetailStore } = useStore()
const { playList } = storeToRefs(playListStore)
// 当前播放歌曲的id
const { songId: playId } = storeToRefs(songDetailStore)

const playSong = (item: any) => {
  // 获取歌曲详情
  songDetailStore.getSongDetail(item.id)
  // 获取歌曲url
  songDetailStore.getSongUrl(item.id)
}
</script>
